<template>
  <xr-create
    :loading="loading"
    :show-cancel="false"
    :width="(clientWidth - 300) + 'px'"
    title="新建工作汇报"
    @close="close"
    @save="saveClick">
    <el-tabs
      slot="title"
      v-model="tabType"
      @tab-click="tabChange">
      <el-tab-pane
        v-for="tab in tabList"
        :key="tab.name"
        :name="tab.name">
        <span v-if="tabType == tab.name" slot="label">{{ tab.label }}</span>
      </el-tab-pane>
    </el-tabs>
    <!-- 品牌店铺 -->
    <div v-if="tabType == '1'" >
      <el-collapse v-model="activeName">
        <create-sections-collapse name="1" font-size="16px" title="汇报信息">
          <el-form
            ref="baseForm"
            :model="baseForm"
            :rules="baseRules"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in baseFields"
              :key="index"
              :index="index"
              :field-from="baseForm"
              :item="item"
              :disabled="item.disabled"
              :style-percent="item.percent ? item.percent : '50%'"
            >
              <template slot-scope="{ data }">
                <wang-editor v-if="data && data.formType == 'editor'" ref="wangeditorBrand" :batch-id="batchId" :editor-config="editorConfig" @change="editorChange" />
                <div v-if="data && data.formType == 'employee'" class="control-item">
                  <span
                    v-for="(item, index) in showSendUserList"
                    :key="index"
                    class="send-user">
                    <el-tooltip
                      placement="bottom"
                      effect="light"
                      popper-class="tooltip-change-border">
                      <div slot="content">
                        <span>{{ item.realname || item.name }}</span>
                      </div>
                      <xr-avatar
                        :name="item.realname || item.name"
                        :size="32"
                        :src="item.img" />
                    </el-tooltip>
                  </span>
                  <members-dep
                    :content-block="false"
                    :user-checked-data="sendUserList || []"
                    :close-dep="true"
                    @popoverSubmit="sendUserChange">
                    <span slot="membersDep" style="position: relative; bottom: 10px;">
                      <el-tooltip
                        placement="bottom"
                        effect="light"
                        popper-class="tooltip-change-border">
                        <div slot="content">
                          <span>{{ sendUserNames }}</span>
                        </div>
                        <i
                          v-show="(sendUserList ? sendUserList.length : 0) > 5"
                          class="el-icon-more more-user-btn" />
                      </el-tooltip>
                      <el-button type="info" size="default" icon="el-icon-plus" circle />
                    </span>
                  </members-dep>
                </div>
              </template>
            </wk-form-item>
          </el-form>
        </create-sections-collapse>
        <create-sections-collapse v-if="reportBrandTargetAuth" name="2" font-size="16px" title="上周品牌汇总数据">
          <el-form
            ref="brandForm"
            :model="brandForms"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="brandForms.dataList" border>
              <el-table-column v-for="(item, index) in brandFields" :key="index" :label="item.label" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="brandForms.dataList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'brand')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center" width="50">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('brand')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse v-if="reportBrandTargetAuth" name="3" font-size="16px" title="月度目标情况">
          <el-form
            ref="summaryForm"
            :model="summaryForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in summaryFields"
              :key="index"
              :index="index"
              :field-from="summaryForm"
              :item="item"
              :disabled="item.disabled"
              :style-percent="item.percent ? item.percent : '50%'"
            />
          </el-form>
        </create-sections-collapse>
        <create-sections-collapse name="4" font-size="16px" title="外部环境">
          <el-form
            ref="environmentForm"
            :model="environmentForm"
            :rules="environmentRules"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in environmentFields"
              :key="index"
              :index="index"
              :field-from="environmentForm"
              :item="item"
              :disabled="item.disabled"
              style-percent="50%"
            />
          </el-form>
        </create-sections-collapse>
        <create-sections-collapse name="5" font-size="16px" title="上周数据汇报（淘系）">
          <el-form
            ref="thisStoreForm"
            :model="thisStoreForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="thisStoreForm.taobaoList" border>
              <el-table-column v-for="(item, index) in thisStoreFields" :key="index" :label="item.label" align="center" width="150">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="thisStoreForm.taobaoList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'thisStoreTaobao')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('thisStoreTaobao')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="6" font-size="16px" title="上周数据汇报（抖店）">
          <el-form
            ref="thisStoreForm"
            :model="thisStoreForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="thisStoreForm.tiktokList" border>
              <el-table-column v-for="(item, index) in thisStoreFields" :key="index" :label="item.label" align="center" width="150">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="thisStoreForm.tiktokList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'thisStoreTiktok')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('thisStoreTiktok')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="7" font-size="16px" title="上周直播数据">
          <el-form
            ref="liveForm"
            :model="liveForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="liveForm.dataList" border>
              <el-table-column v-for="(item, index) in liveFields" :key="index" :label="item.label" :width="item.width ? item.width : 150" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="liveForm.dataList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  >
                    <template slot-scope="{ data }">
                      <div v-if="data && data.formType == 'image'" class="img-box">
                        <el-upload
                          ref="imageUpload"
                          :action="crmFileSaveUrl"
                          :headers="httpHeader"
                          :on-success="(response, file, fileList) => imgFileUploadSuccess(response, file, fileList, scope.$index)"
                          :multiple="false"
                          :limit="1"
                          :show-file-list="false"
                          class="img-uploader"
                          name="file"
                          accept="image/*">
                          <p v-if="!liveForm.dataList[scope.$index].liveData" class="add-img">
                            <span class="el-icon-picture" />
                            <span>添加图片</span>
                          </p>
                          <el-image v-else :src="baseApi + '/adminFile/down/' + liveForm.dataList[scope.$index].liveData" :preview-src-list="[baseApi + '/adminFile/down/' + liveForm.dataList[scope.$index].liveData]" style="width: 100px; height: 100px" />
                        </el-upload>
                      </div>
                    </template>
                  </wk-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'live')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('live')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="8" font-size="16px" title="上周问题及解决方案">
          <el-form
            ref="issueForm"
            :model="issueForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="issueForm.dataList" border>
              <el-table-column v-for="(item, index) in issueFields" :key="index" :label="item.label" :width="clientWidth < 1400 ? '200' : ''" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="issueForm.dataList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'issue')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('issue')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="9" font-size="16px" title="本周目标数据（淘系）">
          <el-form
            ref="nextStoreForm"
            :model="nextStoreForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="nextStoreForm.taobaoList" border>
              <el-table-column v-for="(item, index) in nextStoreFields" :key="index" :label="item.label" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="nextStoreForm.taobaoList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'nextStoreTaobao')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('nextStoreTaobao')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="10" font-size="16px" title="本周目标数据（抖店）">
          <el-form
            ref="nextStoreForm"
            :model="nextStoreForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="nextStoreForm.tiktokList" border>
              <el-table-column v-for="(item, index) in nextStoreFields" :key="index" :label="item.label" align="center" width="150">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="nextStoreForm.tiktokList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'nextStoreTiktok')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('nextStoreTiktok')" />
          </div>
        </create-sections-collapse>
      </el-collapse>
    </div>
    <!-- 新媒体 -->
    <div v-else>
      <el-collapse v-model="activeName">
        <create-sections-collapse name="1" font-size="16px" title="汇报信息">
          <el-form
            ref="baseForm"
            :model="baseForm"
            :rules="baseRules"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in baseFields"
              :key="index"
              :index="index"
              :field-from="baseForm"
              :item="item"
              :disabled="item.disabled"
              :style-percent="item.percent ? item.percent : '50%'"
            >
              <template slot-scope="{ data }">
                <wang-editor v-if="data && data.formType == 'editor'" ref="wangeditorMedia" :batch-id="batchId" :editor-config="editorConfig" @change="editorChange" />
                <div v-if="data && data.formType == 'employee'" class="control-item">
                  <span
                    v-for="(item, index) in showSendUserList"
                    :key="index"
                    class="send-user">
                    <el-tooltip
                      placement="bottom"
                      effect="light"
                      popper-class="tooltip-change-border">
                      <div slot="content">
                        <span>{{ item.realname || item.name }}</span>
                      </div>
                      <xr-avatar
                        :name="item.realname || item.name"
                        :size="32"
                        :src="item.img" />
                    </el-tooltip>
                  </span>
                  <members-dep
                    :content-block="false"
                    :user-checked-data="sendUserList || []"
                    :close-dep="true"
                    @popoverSubmit="sendUserChange">
                    <span slot="membersDep" style="position: relative; bottom: 10px;">
                      <el-tooltip
                        placement="bottom"
                        effect="light"
                        popper-class="tooltip-change-border">
                        <div slot="content">
                          <span>{{ sendUserNames }}</span>
                        </div>
                        <i
                          v-show="(sendUserList ? sendUserList.length : 0) > 5"
                          class="el-icon-more more-user-btn" />
                      </el-tooltip>
                      <el-button type="info" size="default" icon="el-icon-plus" circle />
                    </span>
                  </members-dep>
                </div>
              </template>
            </wk-form-item>
          </el-form>
        </create-sections-collapse>
        <create-sections-collapse name="2" font-size="16px" title="上周签约数据">
          <el-form
            ref="signMediaForm"
            :model="mediaForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="mediaForm.signList" border>
              <el-table-column v-for="(item, index) in signMediaFields" :key="index" :label="item.label" :width="item.width ? item.width : 150" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="mediaForm.signList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'sign')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('sign')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="3" font-size="16px" title="上周孵化数据">
          <el-form
            ref="incubationMediaForm"
            :model="mediaForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="mediaForm.incubationList" :summary-method="getIncubationMediaSummaries" border show-summary row-class-name="incubation-row">
              <el-table-column v-for="(item, index) in incubationMediaFields" :key="index" :label="item.label" :width="item.width ? item.width : 150" align="center">
                <template v-if="!item.children" slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="mediaForm.incubationList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
                <el-table-column v-for="(child, cIndex) in item.children" :key="cIndex" :prop="child.field" :label="child.label" :width="child.width ? child.width : 150" align="center">
                  <template slot-scope="scope">
                    <wk-form-item
                      :key="cIndex"
                      :index="cIndex"
                      :field-from="mediaForm.incubationList[scope.$index].children[item.formIndex]"
                      :item="child"
                      :disabled="child.disabled"
                      style-percent="100%"
                    />
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'incubation')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('incubation')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="4" font-size="16px" title="上周问题及解决方案">
          <el-form
            ref="issueForm"
            :model="issueForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="issueForm.dataList" border>
              <el-table-column v-for="(item, index) in issueFields" :key="index" :label="item.label" :width="clientWidth < 1400 ? '200' : ''" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="issueForm.dataList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'issue')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('issue')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="5" font-size="16px" title="本周孵化达人">
          <el-form
            v-for="(form, formIndex) in documentForm.incubationList"
            ref="incubationDocumentForm"
            :key="formIndex"
            :model="documentForm.incubationList[formIndex]"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in documentFields"
              :key="index"
              :index="index"
              :field-from="form"
              :item="item"
              :disabled="item.disabled"
              :style-percent="item.percent ? item.percent : '50%'"
            >
              <template slot-scope="{ data }">
                <wang-editor v-if="data && data.formType == 'editor'" :editor-config="editorConfig" @change="(editor) => mediaEditorChange(editor, form)" />
              </template>
            </wk-form-item>
            <div class="add-btn">
              <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(formIndex, 'incubationDocument')" />
            </div>
          </el-form>
          <div class="add-btn" style="margin-top: 20px; text-align: center; width: 100%;">
            <el-button type="primary" icon="el-icon-plus" @click="addForm('incubationDocument')">添加孵化达人</el-button>
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="6" font-size="16px" title="本周新签达人">
          <el-form
            v-for="(form, formIndex) in documentForm.signList"
            ref="signDocumentForm"
            :key="formIndex"
            :model="documentForm.signList[formIndex]"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in documentFields"
              :key="index"
              :index="index"
              :field-from="form"
              :item="item"
              :disabled="item.disabled"
              :style-percent="item.percent ? item.percent : '50%'"
            >
              <template slot-scope="{ data }">
                <wang-editor v-if="data && data.formType == 'editor'" :editor-config="editorConfig" @change="(editor) => mediaEditorChange(editor, form)" />
              </template>
            </wk-form-item>
            <div class="add-btn">
              <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(formIndex, 'signDocument')" />
            </div>
          </el-form>
          <div class="add-btn" style="margin-top: 20px; text-align: center; width: 100%;">
            <el-button type="primary" icon="el-icon-plus" @click="addForm('signDocument')">添加新签达人</el-button>
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="7" font-size="16px" title="近期热门穿搭">
          <el-form
            v-for="(form, formIndex) in documentForm.hotList"
            ref="hotDocumentForm"
            :key="formIndex"
            :model="documentForm.hotList[formIndex]"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <wk-form-item
              v-for="(item, index) in documentFields"
              :key="index"
              :index="index"
              :field-from="form"
              :item="item"
              :disabled="item.disabled"
              :style-percent="item.percent ? item.percent : '50%'"
            >
              <template slot-scope="{ data }">
                <wang-editor v-if="data && data.formType == 'editor'" :editor-config="editorConfig" @change="(editor) => mediaEditorChange(editor, form)" />
              </template>
            </wk-form-item>
            <div class="add-btn">
              <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(formIndex, 'hotDocument')" />
            </div>
          </el-form>
          <div class="add-btn" style="margin-top: 20px; text-align: center; width: 100%;">
            <el-button type="primary" icon="el-icon-plus" @click="addForm('hotDocument')">添加热门穿搭</el-button>
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="8" font-size="16px" title="本周目标计划">
          <el-form
            ref="nextWeekMediaForm"
            :model="mediaForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="mediaForm.nextWeek" border>
              <el-table-column v-for="(item, index) in nextMediaFields" :key="index" :label="item.label" :width="item.width ? item.width : ''" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="mediaForm.nextWeek[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'nextMedia')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('nextMedia')" />
          </div>
        </create-sections-collapse>
        <create-sections-collapse name="9" font-size="16px" title="本周重点工作">
          <el-form
            ref="keyworkForm"
            :model="keyworkForm"
            :validate-on-rule-change="false"
            class="wk-form"
            label-position="top">
            <el-table :data="keyworkForm.dataList" border>
              <el-table-column v-for="(item, index) in keyworkFields" :key="index" :label="item.label" :width="clientWidth < 1400 ? '200' : ''" align="center">
                <template slot-scope="scope">
                  <wk-form-item
                    :key="index"
                    :index="index"
                    :field-from="keyworkForm.dataList[scope.$index]"
                    :item="item"
                    :disabled="item.disabled"
                    style-percent="100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50" fixed="right">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" icon="el-icon-minus" circle @click="removeForm(scope.$index, 'keywork')" />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div style="margin: 20px 0; text-align: center">
            <el-button type="primary" icon="el-icon-plus" circle @click="addForm('keywork')" />
          </div>
        </create-sections-collapse>
      </el-collapse>
    </div>
  </xr-create>
</template>

<script>
import {
  executionReportSummaryGetLastWeekAPI,
  executionBrandReportAddAPI,
  executionMediaReportAddAPI
} from '@/api/oa/report'

import axios from 'axios'
import XrCreate from '@/components/XrCreate'
import CreateSectionsCollapse from '@/components/CreateSectionsCollapse'
import WkFormItem from '@/components/NewCom/WkForm/WkFormItem'
import VDistpicker from '@/components/VDistpicker'

import CustomFieldsMixin from '@/mixins/CustomFields'
import { objDeepCopy } from '@/utils'

import {
  baseModel,
  brandModel,
  storeNameOptions,
  summaryModel,
  environmentModel,
  storeModel,
  issueModel,
  liveModel,
  mediaModel,
  documentModel,
  mediaDataFieldOption,
  storeDataFieldOption,
  incubationMediaCommonFields
} from '../model/report'

import WangEditor from '@/components/Editor'
import { crmFileDeleteAPI, crmFileSaveUrl } from '@/api/common'
import MembersDep from '@/components/SelectEmployee/MembersDep'
import { mapGetters } from 'vuex'

export default {
  // 员工创建
  name: 'ReportCreateView',
  components: {
    XrCreate,
    CreateSectionsCollapse,
    WkFormItem,
    VDistpicker,
    WangEditor,
    MembersDep
  },
  filters: {},
  mixins: [CustomFieldsMixin],
  props: {
    detail: Object,
    tabType: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      loading: false,
      // 基本信息
      baseFields: [],
      baseRules: {},
      baseForm: {},
      tabList: [{
        name: '1',
        label: '品牌店铺'
      }, {
        name: '2',
        label: '新媒体'
      }],
      editorConfig: {
        placeholder: '请输入...',
        autoFocus: true,
        MENU_CONF: {}
      },
      sendUserList: [],
      // 品牌信息
      brandFields: [],
      brandForms: {
        dataList: []
      },
      // 汇总数据
      summaryFields: [],
      summaryForm: {},
      summaryRules: {},
      // 外部环境
      environmentFields: [],
      environmentForm: {},
      environmentRules: {},
      // 本周店铺数据
      thisStoreFields: [],
      thisStoreForm: {
        taobaoList: [],
        tiktokList: []
      },
      // 直播数据
      liveFields: [],
      liveForm: {
        dataList: []
      },
      // 问题及解决方案
      issueFields: [],
      issueForm: {
        dataList: []
      },
      // 下周目标数据
      nextStoreFields: [],
      nextStoreForm: {
        taobaoList: [],
        tiktokList: []
      },
      // 新媒体数据
      signMediaFields: [],
      incubationMediaFields: [],
      nextMediaFields: [],
      mediaForm: {
        signList: [],
        incubationList: [], // 此数组数据结构为 [{children: [4条数据], favouriteNickname: ''}, {children: [], favouriteNickname: ''}]
        nextWeek: []
      },
      // 红人信息
      documentFields: [],
      documentForm: {
        incubationList: [],
        signList: [],
        hotList: []
      },
      // 下周重点工作
      keyworkFields: [],
      keyworkForm: {
        dataList: []
      },
      // 图片上传路径
      crmFileSaveUrl: crmFileSaveUrl,
      batchId: '',
      activeName: ['1']
    }
  },
  computed: {
    ...mapGetters([
      'reportBrandTargetAuth'
    ]),
    httpHeader() {
      return {
        'Admin-Token': axios.defaults.headers['Admin-Token']
      }
    },
    baseApi() {
      return process.env.BASE_API
    },
    clientWidth() {
      let winWidth
      if (window.innerWidth) {
        winWidth = window.innerWidth
      } else if (document.body && document.body.clientWidth) {
        winWidth = document.body.clientWidth
      } else {
        winWidth = document.documentElement.clientWidth || 1920
      }
      return winWidth
    },
    sendUserNames() {
      const sendUserName = this.sendUserList && this.sendUserList.length > 0 ? `${this.sendUserList.length}个员工` : ''
      const names = []
      if (sendUserName) {
        names.push(sendUserName)
      }
      return `等${names.join('和')}`
    },
    showSendUserList() {
      const sendUserList = this.sendUserList || []
      return sendUserList.slice(0, 5)
    },
    month() {
      return this.baseForm.month
    }
  },
  watch: {
    month(val) {
      if (val && val.indexOf('-') != -1) {
        this.baseForm.targetYear = Number(val.split('-')[0])
        this.baseForm.targetMonth = Number(val.split('-')[1])
      }
    },
    // 自动计算汇总数据
    summaryForm: {
      handler: function(val, oldVal) {
        if (this.summaryForm.target && this.summaryForm.actual) {
          this.summaryForm.completeNow = Number(this.summaryForm.actual) + Number(this.summaryForm.complete)
          this.summaryForm.completeProgress = Math.floor(Number(this.summaryForm.completeNow) / Number(this.summaryForm.target) * 100)
        }
      },
      deep: true,
      immediate: false
    },
    // 自动计算店铺数据完成率
    thisStoreForm: {
      handler: function(val, oldVal) {
        if (this.thisStoreForm.taobaoList) {
          this.thisStoreForm.taobaoList.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
        if (this.thisStoreForm.tiktokList) {
          this.thisStoreForm.tiktokList.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
      },
      deep: true
    },
    nextStoreForm: {
      handler: function(val, oldVal) {
        if (this.nextStoreForm.taobaoList) {
          this.nextStoreForm.taobaoList.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
        if (this.nextStoreForm.tiktokList) {
          this.nextStoreForm.tiktokList.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
      },
      deep: true
    },
    // 自动计算签约数据完成率、孵化数据完成率
    mediaForm: {
      handler: function(val, oldVal) {
        if (this.mediaForm.signList) {
          this.mediaForm.signList.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
        if (this.mediaForm.incubationList) {
          this.mediaForm.incubationList.forEach(element => {
            if (element.children) {
              element.children.forEach(item => {
                if (item.target && item.actual) {
                  item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
                }
              })
            }
          })
        }
        if (this.mediaForm.nextWeek) {
          this.mediaForm.nextWeek.forEach(item => {
            if (item.target && item.actual) {
              item.completedWeek = Math.floor(Number(item.actual) * 100 / Number(item.target))
            }
          })
        }
      },
      deep: true
    }
  },
  created() {
    this.batchId = this.getUUID()
    this.tabChange()
    this.getSummaryLastWeek()
  },
  mounted() {
  },

  beforeDestroy() {},
  methods: {
    editorChange(editor, type) {
      this.baseForm.reportContent = editor.children
    },
    mediaEditorChange(editor, data) {
      data.content = editor.children
    },
    /**
     * tab change
     */
    tabChange() {
      this.activeName = ['1']
      // 重置基本信息
      this.baseFields = objDeepCopy(baseModel.field)
      this.baseFields.forEach(item => {
        if (item.formType == 'file') {
          item.batchId = this.batchId
        }
      })
      this.baseRules = objDeepCopy(baseModel.rule)
      this.baseForm = objDeepCopy(baseModel.form)
      // 问题及解决方案
      this.issueFields = issueModel.field
      if (this.tabType == '1') {
        // 品牌数据
        this.brandFields = objDeepCopy(brandModel.field)
        // 月汇总数据
        this.summaryFields = objDeepCopy(summaryModel.field)
        this.summaryForm = objDeepCopy(summaryModel.form)
        // 外部环境
        this.environmentFields = objDeepCopy(environmentModel.field)
        this.environmentForm = objDeepCopy(environmentModel.form)
        // 店铺数据
        this.thisStoreFields = storeModel.field('LAST')
        this.liveFields = liveModel.field
        // 下周目标数据
        this.nextStoreFields = storeModel.field('THIS')
        if (this.$refs.wangeditorMedia && this.$refs.wangeditorMedia[0]) {
          this.$refs.wangeditorMedia[0].clear()
        }
      } else {
        // 签约数据
        this.signMediaFields = mediaModel.field(1)
        this.signMediaFields[0].setting = mediaDataFieldOption.slice(5, 8)
        // 孵化数据
        this.incubationMediaFields = objDeepCopy(mediaModel.incubationMediaFields)
        // 下周目标计划
        this.nextMediaFields = mediaModel.field(3)
        this.nextMediaFields[0].setting = mediaDataFieldOption.slice(0, 5)
        // 文档内容数据
        this.documentFields = documentModel.field
        // 下周重点工作
        this.keyworkFields = objDeepCopy(issueModel.field)
        this.keyworkFields.splice(2, 1)
        if (this.$refs.wangeditorBrand && this.$refs.wangeditorBrand[0]) {
          this.$refs.wangeditorBrand[0].clear()
        }
      }
    },
    // 获取截止上周的汇总数据
    getSummaryLastWeek() {
      executionReportSummaryGetLastWeekAPI({
        year: this.baseForm.targetYear,
        month: this.baseForm.targetMonth,
        dataField: 'WEEK'
      }).then(res => {
        const data = res.data
        this.summaryForm.complete = data
      }).catch(e => {
        console.log(e)
      })
    },

    /**
     * 发送人选择
     */
    sendUserChange(users) {
      this.sendUserList = users
      this.baseForm.ownerUserIds = users.map(item => item.userId)
    },
    close() {
      this.$confirm('离开页面后数据将被清空，建议先保存数据', '提示', {
        confirmButtonText: '确认退出',
        cancelButtonText: '取消操作',
        type: 'warning'
      }).then(() => {
        this.$emit('close')
      }).catch(() => {})
    },

    saveClick() {
      // 暂时只验证基础数据的规则
      this.$refs.baseForm.validate(valid => {
        if (valid) {
          // if (!this.baseForm.ownerUserIds) {
          //   this.$message.error('请选择汇报对象')
          //   return false
          // }
          this.uploadCreateData()
          return false
        } else {
          // 提示第一个error
          this.getFormErrorMessage(this.$refs.baseForm)
          return false
        }
      })
    },

    /**
     * 提交数据
     */
    uploadCreateData() {
      const params = {}
      // 基本信息
      // 处理batchId
      if (this.baseForm.files && this.baseForm.files.length > 0) {
        this.baseForm.batchId = this.baseForm.files[0].batchId
      }
      this.baseForm.platform = Number(this.tabType)
      const baseForm = objDeepCopy(this.baseForm)
      // 汇报对象处理
      if (baseForm.ownerUserIds && this.baseForm.ownerUserIds.length > 0) {
        baseForm.ownerUserIds = baseForm.ownerUserIds.join(',')
      }
      // 处理富文本内容
      baseForm.reportContent = JSON.stringify(baseForm.reportContent)
      const keys = Object.keys(baseForm)
      keys.forEach(key => {
        if (baseForm[key]) {
          params[key] = baseForm[key]
        }
      })

      let request
      if (this.tabType == '1') {
        request = executionBrandReportAddAPI
        // 数据汇总
        const summaryObj = Object.assign({}, this.summaryForm)
        summaryObj.brandList = objDeepCopy(this.brandForms.dataList)
        params.summaryList = [summaryObj]
        // 外部环境
        params.environmentList = objDeepCopy(this.environmentForm)
        // 本周数据汇报
        params.thisStoreList = objDeepCopy(this.thisStoreForm.taobaoList)
        params.thisStoreList = params.thisStoreList.concat(this.thisStoreForm.tiktokList)
        // 本周直播数据
        params.liveList = objDeepCopy(this.liveForm.dataList)
        // 问题汇总
        params.issuesList = objDeepCopy(this.issueForm.dataList)
        // 下周目标数据
        params.nextStoreList = objDeepCopy(this.nextStoreForm.taobaoList)
        params.nextStoreList = params.nextStoreList.concat(this.nextStoreForm.tiktokList)
      } else {
        request = executionMediaReportAddAPI
        // 新媒体数据
        params.mediaList = objDeepCopy(this.mediaForm.signList)
        this.mediaForm.incubationList.forEach(item => {
          item.children.forEach(child => {
            child.favouriteNickname = item.favouriteNickname
            params.mediaList.push(child)
          })
        })
        this.mediaForm.nextWeek.forEach(item => params.mediaList.push(item))
        // 红人数据
        params.documentList = objDeepCopy(this.documentForm.incubationList)
        this.documentForm.signList.forEach(item => params.documentList.push(item))
        this.documentForm.hotList.forEach(item => params.documentList.push(item))
        params.documentList.forEach(item => {
          item.content = JSON.stringify(item.content)
        })
        // 问题汇总 & 重点工作
        params.issuesList = objDeepCopy(this.issueForm.dataList)
        this.keyworkForm.dataList.forEach(item => params.issuesList.push(item))
      }
      this.loading = true
      request(params).then(res => {
        this.$emit('close')
        this.$message.success(`新建成功`)
        this.$emit('success')
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 表单动态操作
    */
    addForm(type) {
      if (type == 'brand') {
        const nowTypes = this.brandForms.dataList.map(i => i.storeType)
        const allTypes = storeNameOptions.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = objDeepCopy(brandModel.form)
        form.storeType = allTypes.length > 0 ? allTypes[0] : ''
        this.brandForms.dataList.push(form)
      } else if (type == 'thisStoreTaobao') {
        // 1 淘系
        const nowTypes = this.thisStoreForm.taobaoList.map(i => i.dataField)
        const allTypes = storeDataFieldOption.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = storeModel.form('LAST', 1)
        form.dataField = allTypes.length > 0 ? allTypes[0] : ''
        this.thisStoreForm.taobaoList.push(form)
      } else if (type == 'thisStoreTiktok') {
        // 2 抖店
        const nowTypes = this.thisStoreForm.tiktokList.map(i => i.dataField)
        const allTypes = storeDataFieldOption.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = storeModel.form('LAST', 2)
        form.dataField = allTypes.length > 0 ? allTypes[0] : ''
        this.thisStoreForm.tiktokList.push(form)
      } else if (type == 'nextStoreTaobao') {
        // 1 淘系
        const nowTypes = this.nextStoreForm.taobaoList.map(i => i.dataField)
        const allTypes = storeDataFieldOption.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = storeModel.form('THIS', 1)
        form.dataField = allTypes.length > 0 ? allTypes[0] : ''
        this.nextStoreForm.taobaoList.push(form)
      } else if (type == 'nextStoreTiktok') {
        // 2 抖店
        const nowTypes = this.nextStoreForm.tiktokList.map(i => i.dataField)
        const allTypes = storeDataFieldOption.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = storeModel.form('THIS', 2)
        form.dataField = allTypes.length > 0 ? allTypes[0] : ''
        this.nextStoreForm.tiktokList.push(form)
      } else if (type == 'issue') {
        const form = objDeepCopy(issueModel.form)
        form.type = 1
        this.issueForm.dataList.push(form)
      } else if (type == 'live') {
        this.liveForm.dataList.push(objDeepCopy(liveModel.form))
      } else if (type == 'sign') {
        // 签约数据
        const nowTypes = this.mediaForm.signList.map(i => i.dataField)
        const allTypes = this.signMediaFields[0].setting.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = objDeepCopy(mediaModel.form)
        form.period = 'THIS'
        form.dataType = 1
        form.dataField = allTypes.length > 0 ? allTypes[0] : ''
        this.mediaForm.signList.push(form)
      } else if (type == 'incubation') {
        // 孵化数据
        const parentForm = {
          favouriteNickname: ''
        }
        const children = []
        for (let i = 1; i < 5; i++) {
          const form = objDeepCopy(mediaModel.form)
          form.period = 'THIS'
          form.dataType = 2
          form.dataField = i
          children.push(form)
        }
        parentForm.children = children
        this.mediaForm.incubationList.push(parentForm)
      } else if (type == 'nextMedia') {
        // 下周目标计划
        const nowTypes = this.mediaForm.nextWeek.map(i => i.dataField)
        const allTypes = this.nextMediaFields[0].setting.map(i => i.value)
        nowTypes.forEach(i => {
          if (allTypes.indexOf(i) != -1) {
            allTypes.splice(allTypes.indexOf(i), 1)
          }
        })
        const form = objDeepCopy(mediaModel.form)
        form.period = 'NEXT'
        form.dataType = 3
        form.dataField = allTypes.length > 0 ? allTypes[0] : ''
        this.mediaForm.nextWeek.push(form)
      } else if (type == 'incubationDocument') {
        if (!this.documentForm.incubationList) {
          this.documentForm.incubationList = []
        }
        const form = objDeepCopy(documentModel.form)
        form.type = 1
        this.documentForm.incubationList.push(form)
      } else if (type == 'signDocument') {
        if (!this.documentForm.signList) {
          this.documentForm.signList = []
        }
        const form = objDeepCopy(documentModel.form)
        form.type = 2
        this.documentForm.signList.push(form)
      } else if (type == 'hotDocument') {
        if (!this.documentForm.hotList) {
          this.documentForm.hotList = []
        }
        const form = objDeepCopy(documentModel.form)
        form.type = 3
        this.documentForm.hotList.push(form)
      } else if (type == 'keywork') {
        const form = objDeepCopy(issueModel.form)
        form.type = 2
        this.keyworkForm.dataList.push(form)
      }
    },
    removeForm(index, type) {
      this.$confirm('您确定要删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (type == 'brand') {
          this.brandForms.dataList.splice(index, 1)
        } else if (type == 'thisStoreTaobao') {
          this.thisStoreForm.taobaoList.splice(index, 1)
        } else if (type == 'thisStoreTiktok') {
          this.thisStoreForm.tiktokList.splice(index, 1)
        } else if (type == 'nextStoreTaobao') {
          this.nextStoreForm.taobaoList.splice(index, 1)
        } else if (type == 'nextStoreTiktok') {
          this.nextStoreForm.tiktokList.splice(index, 1)
        } else if (type == 'issue') {
          this.issueForm.dataList.splice(index, 1)
        } else if (type == 'live') {
          if (this.liveForm.dataList[index].liveData) {
            crmFileDeleteAPI({ id: this.liveForm.dataList[index].liveData }).then(res => {}).catch(() => {})
          }
          this.liveForm.dataList.splice(index, 1)
        } else if (type == 'sign') {
          // 签约数据
          this.mediaForm.signList.splice(index, 1)
        } else if (type == 'incubation') {
          // 孵化数据
          this.mediaForm.incubationList.splice(index, 1)
        } else if (type == 'nextMedia') {
          // 下周目标计划
          this.mediaForm.nextWeek.splice(index, 1)
        } else if (type == 'incubationDocument') {
          this.documentForm.incubationList.splice(index, 1)
        } else if (type == 'signDocument') {
          this.documentForm.signList.splice(index, 1)
        } else if (type == 'hotDocument') {
          this.documentForm.hotList.splice(index, 1)
        } else if (type == 'keywork') {
          this.keyworkForm.dataList.splice(index, 1)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 上传图片成功
    imgFileUploadSuccess(response, file, fileList, index) {
      this.$set(this.liveForm.dataList[index], 'liveData', response.data.fileId)
    },
    getUUID() {
      return 'xxxxxxxxxxxxxxxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {
        const r = (Math.random() * 16) | 0
        const v = c === 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    },
    // 上周孵化数据合计
    getIncubationMediaSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === columns.length - 1) {
          sums[index] = ''
          return
        }
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        // TODO incubationMediaCommonFields长度变化时此处要跟着变
        if ((index + 1) % 4 == 0) {
          sums[index] = ((Math.floor(sums[index - 1] * 100 / sums[index - 2])) || 0) + '%'
          return
        } else if ((index + 1) % 4 == 1) {
          sums[index] = '--'
          return
        }
        const values = []
        data.forEach(item => {
          if (item.children) {
            values.push(Number(item.children[Math.floor((index - 1) / incubationMediaCommonFields.length)][column.property]))
          }
        })
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = ''
        }
      })

      return sums
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs {
  width: 100%;
  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-tabs__item {
    color: #333;
    font-weight: bold;
  }
}

.wk-form {
  display: flex;
  flex-wrap: wrap;
  /deep/.is-detail_table {
    width: 100% !important;
  }

  .img-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .img-uploader /deep/ .el-upload:hover {
    border-color: #409EFF;
  }
  .add-img {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  // 参与人
  .send-user {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .send-user + .send-user {
    margin-left: 7px;
  }
  .more-user-btn {
    background-color: #F3F7FF;
    border-radius: 50%;
    padding: 5px;
    font-size: 12px;
    color: #666;
    margin-left: 7px;
    &:hover {
      background-color: $xr-color-primary;
      color: white;
    }
  }
  .add-btn {
    margin-top: 20px;
    text-align: center;
    width: 100%;
  }
  /deep/ .el-table__footer-wrapper div {
    color: red;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
